<template>
    <div>Handbook.vue的组件</div>
    <el-input v-model="positionInput" id="searchInputId" class="common-layout" size="small" placeholder="输入关键词搜索位置"
        style="height:25px;width:26%;margin-left:1%;" />
    <el-button @click="search">搜索</el-button>
    <div class="gdmap-container">
        <div ref="mapContainer" id="container"></div>
    </div>
</template>
  
<script setup lang="ts">
import AMapLoader from "@amap/amap-jsapi-loader";
import { onMounted, onUnmounted, ref } from 'vue';

const positionInput = ref('');
let map = null;

const initMap = () => {
    window._AMapSecurityConfig = {
        securityJsCode: "41436e65e98651d6c173e1425d3f20ae", // 密钥
    };
    AMapLoader.load({
        key: "3cdd86f4180028094285661936cbb7d8",
        version: "2.0",
        plugins: [
            'AMap.AutoComplete',
            'AMap.PlaceSearch'
        ]
    }).then((AMap) => {
        map = new AMap.Map("container", {
            resizeEnable: true,
            viewMode: "3D",
            zoom: 8,
            center: [118, 30]
        });
        const autoOptions = {
            input: "searchInputId"
        };
        const auto = new AMap.AutoComplete(autoOptions);
        const placeSearch = new AMap.PlaceSearch({
            map: map
        });
        auto.on("select", select);
        function select(e) {
            placeSearch.setCity(e.poi.adcode);
            placeSearch.search(e.poi.name);
        }
    });
};

onMounted(() => {
    initMap();
});

onUnmounted(() => {
    map?.destroy();
});

const search = () => {
    const placeSearch = new AMap.PlaceSearch({
        map: map
    });
    placeSearch.search(positionInput.value);
};
</script>
  
<style scoped>
.gdmap-container {
    width: 500px;
    height: 300px;
}

#container {
    padding: 0px;
    margin: 0px;
    border: 1px solid gray;
    width: 100%;
    height: 100%;
}
</style>